<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const isCategoryManage = ref(false)

  watch(
    router.currentRoute,
    (value) => {
      isCategoryManage.value = !(value.name === 'MainlyCategory')
    },
    {
      immediate: true,
    }
  )

  const buttonClick = (name: string) => {
    router.push({ name })
    isCategoryManage.value = !(name === 'MainlyCategory')
  }
</script>

<template>
  <a-float-button-group
    trigger="click"
    type="primary"
    :style="{ right: '24px' }"
  >
    <template #icon>
      <PlusOutlined />
    </template>

    <a-float-button
      v-if="!isCategoryManage"
      @click="buttonClick('CategoryManage')"
    >
      <template #icon>
        <CreditCardOutlined />
      </template>
      <template #tooltip>
        <div>类别管理</div>
      </template>
    </a-float-button>

    <a-float-button
      v-if="isCategoryManage"
      @click="buttonClick('MainlyCategory')"
    >
      <template #icon>
        <UnorderedListOutlined />
      </template>
      <template #tooltip>
        <div>主页类别</div>
      </template>
    </a-float-button>

    <a-float-button @click="buttonClick('TodoTask')">
      <template #icon>
        <SnippetsOutlined />
      </template>
      <template #tooltip>
        <div>任务清单</div>
      </template>
    </a-float-button>

    <!-- 用户管理 需要superAdmin权限 -->
    <Permission permission="superAdmin">
      <a-float-button @click="buttonClick('UserManage')">
        <template #icon>
          <UserOutlined />
        </template>
        <template #tooltip>
          <div>用户管理</div>
        </template>
      </a-float-button>
    </Permission>
  </a-float-button-group>
</template>

<style scoped lang="less"></style>
